<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Meitav Dash Mortage Simulator</title>

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />

	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- The main CSS file -->
		<link href="resources/css/style.css" rel="stylesheet" />

		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

	<!-- Notice the controller directive -->
	<body ng-app ng-controller="InlineEditorController">

		<!-- When this element is clicked, hide the tooltip -->
		<div id="main" ng-click="hideTooltip()">

			<!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
			<div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">

				<!-- ng-model binds the contents of the text field with the "value" model.
					 Any changes to the text field will automatically update the value, and
					 all other bindings on the page that depend on it.  -->

				<input type="text" ng-model="value" />
			</div>

			<!-- Call a method defined in the InlineEditorController that toggles
			 the showtooltip varaible -->
			<p ng-click="toggleTooltip($event)">{{value}}</p>

		</div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	    <!-- Include all compiled plugins (below), or include individual files as needed -->
	    <script src="js/bootstrap.min.js"></script>
		<!-- Include AngularJS from Google's CDN -->
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
		<script src="resources/js/script.js"></script>
	</body>
</html>
